<template>
	<view class="content">
		<image class="yhu_img" @click="coupons" src="../../static/img/yhq.png"></image>
		<view class="uni-padding-wrap">  
			<view class="page-section swiper">
				<view class="page-section-spacing">
					<swiper class="swiper" indicator-color="#FFFFFF" indicator-active-color="#F06463" :circular="true" :indicator-dots="indicatorDots"
					 :autoplay="autoplay" :interval="interval" :duration="duration">
						<swiper-item v-for="(item,index) in banner" :key="index">
							<image :src="urls+item.image" @click="outPages(item.linkurl)" mode="aspectFill"></image>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
		<view class="top_tit flexs1">
			<view class="top_tita flexs3">
				<image class="top_tit_img" src="../../static/img/dui.png"></image>
				<view class="top_tit_name">精洗保养1</view>
			</view>
			<view class="top_tita flexs3">
				<image class="top_tit_img" src="../../static/img/dui.png"></image>
				<view class="top_tit_name">智慧洗护</view>
			</view>
			<view class="top_tita flexs3">
				<image class="top_tit_img" src="../../static/img/dui.png"></image>
				<view class="top_tit_name">预约上门取衣</view>
			</view>
		</view>
		<view class="list_type bg-white flexs1">
			<view class="list_typea list_typea1" v-for="(item,index) in category" :key="index" @click="classification(item.id,item.name)">
				<image class="list_type_img" :src="urls+item.image"></image>
				<view class="list_type_name">{{item.name}}</view>
			</view>
			<!-- <view class="list_typea">
				<image class="list_type_img" src="../../static/img/img2.png"></image>
				<view class="list_type_name">居家洗护</view>
			</view>
			<view class="list_typea">
				<image class="list_type_img" src="../../static/img/img3.png"></image>
				<view class="list_type_name">皮具养护</view>
			</view>
			<view class="list_typea">
				<image class="list_type_img" src="../../static/img/img4.png"></image>
				<view class="list_type_name">织补维护</view>
			</view> -->
		</view>
		<view class="list_kefu flexs1">
			<view class="list_kfa flexs2" @click="topUp">
				<image class="list_kf_img list_kf_img1" src="../../static/img/chongzhi.png"></image>
				<view class="list_kf_name1">充值</view>
			</view>
			<view class="list_kfa flexs2" @click="kefu">
				<image class="list_kf_img" src="../../static/img/kefus.png"></image>
				<view class="list_kf_name2">客服</view>
			</view>
			<view class="list_kfa flexs2" @click="videos">
				<image class="list_kf_img" src="../../static/img/shipin.png"></image>
				<view class="list_kf_name3">视频</view>
			</view>
		</view>
		<view class="tehui text-white text-center">特惠推荐</view>
		<image class="bg_img" :src="urls+tui_image"></image>
		<view class="bots">
			<view class="bots_list" v-for="(item, index) in tui_good" :key="index" @click="classF(item.category_id,item.bigcategory_id)">
				<view class="bots_listas flexs1">
					<view class="bots_l_left">
						<view class="bots_l_name text-bold">{{item.name}}</view>
						<view class="text-red text-bold bots_price">
							<text class="small">￥</text>
							<text class="">{{item.price}}</text>
						</view>
					</view>
					<view class="bots_l_right">
						<image :src="urls+item.image"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				swiperList: [],
				urls: this.$common.baseUrl,
				banner:[],
				category:[],
				tui_image:'',
				tui_good:[]
			}
		},
		onLoad() {
			// this.initData();
		},
		onShow() {
			this.initData();
		},
		methods: {
			//首页信息
			initData(){
				this.$common.requests('/api/Shop/index').then(res =>{
					if(res.data.code == 1){
						this.banner = res.data.data.banner;
						this.category = res.data.data.category;
						this.tui_image = res.data.data.tui_image;
						this.tui_good = res.data.data.tui_good;
					}else{
						this.$api.msg(res.data.msg)
					}
				})
			},
			//洗衣洗鞋
			classification(id,name){
				uni.navigateTo({
					url:'../classification/classification?category_id='+id + '&title=' + name
				})
			},
			classF(id,big_id){
				uni.navigateTo({
					url:'../classification/classification?category_id='+big_id + '&TabCur=' + id
				})
			},
			videos(){
				uni.navigateTo({
					url:'../videos/videos'
				})
			},
			//充值
			topUp(){
				uni.navigateTo({
					url:'../topUp/topUp'
				})
			},
			//优惠券
			coupons(){
				uni.navigateTo({
					url:'../coupons/coupons'
				})
			},
			//轮播图页面跳转
			outPages(hrefs){
				console.log(hrefs)
				if(hrefs){
					uni.navigateTo({
						url:'../outPage/outPage?urls=' + hrefs
					})
				}
			},
			kefu(){
				window.location.href = 'http://w10.ttkefu.com/k/linkurl/?t=3B1FGAE5'
			}
		}
	}
</script>

<style>
	.content {
		width: 100vw;
		height: 100vh;
		background: #F9F9F9;
		overflow-y: scroll;
	}
	.yhu_img{
		width: 100upx;
		height: 100upx;
		position: fixed;
		bottom: 180upx;
		right: 10upx;
		z-index: 999;
	}
	.uni-padding-wrap,
	.swiper {
		height: 350upx;
	}

	.swiper image {
		width: 100%;
	}

	.top_tit {
		margin: 20upx;
		padding: 15upx 20upx;
		font-size: 28upx;
		background: #FFFFFF;
		border-radius: 20upx;
	}

	.top_tit_img {
		width: 32upx;
		height: 30upx;
		margin-right: 20upx;
	}

	.list_type {
		margin: 0 20upx;
		padding: 30upx 0;
		border-radius: 20upx;
	}

	.list_typea {
		width: 25%;
		border-left: 1px solid #E6E6E6;
		font-size: 28upx;
		text-align: center;
	}

	.list_typea1 {
		border-left: none;
	}

	.list_type_img {
		width: 100upx;
		height: 100upx;
	}

	.list_type_name {
		padding-top: 20upx;
	}

	.list_kefu {
		margin: 20upx;
		font-size: 28upx;
	}

	.list_kfa {
		width: 30%;
		background: #FFFFFF;
		border-radius: 15upx;
		height: 95upx;
	}

	.list_kf_img {
		width: 60upx;
		height: 60upx;
		margin-right: 20upx;
	}

	.list_kf_img1 {
		width: 70upx;
		height: 50upx;
	}

	.list_kf_name1 {
		color: #3ECDB5;
	}

	.list_kf_name2 {
		color: #3FA9F5;
	}

	.list_kf_name3 {
		color: #F47D49;
	}

	.tehui {
		margin: 20upx auto;
		background: #14C7CE;
		font-size: 28upx;
		width: 180upx;
		padding: 2upx 0 5upx 0;
		border-radius: 20upx;
	}

	.bg_img {
		width: 100%;
		height: 260upx;
	}

	.bots {
		margin: 20upx;
		font-size: 28upx;
		white-space: nowrap;
		overflow-x: scroll;
	}

	.bots_list {
		width: 40%;
		border-radius: 20upx;
		background: #FFFFFF;
		margin-right: 20upx;
		display: inline-block;
	}

	.bots_listas {
		width: 100%;
		height: 100%;
		padding: 20upx;
	}

	.bots_l_left {
		width: 55%;
	}

	.small {
		font-size: 24upx;
	}

	.bots_l_right {
		width: 45%;
		padding-bottom: 45%;
		position: relative;
		top: 0;
		left: 0;
	}

	.bots_l_right image {
		width: 90%;
		height: 90%;
		position: absolute;
		top: 5%;
		left: 5%;
	}

	.bots_price {
		padding-top: 10upx;
	}
</style>
